"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"
import {
  ArrowLeft,
  Award,
  BarChart3,
  Users,
  Lightbulb,
  Target,
  CheckCircle,
  AlertCircle,
  TrendingUp,
  TrendingDown,
  Star,
  ThumbsUp,
  ThumbsDown,
  Eye,
  Heart,
  MessageSquare,
  Download,
  Share2,
  Zap,
  Shield,
  Rocket,
  Gem,
  Crown,
  Diamond,
  Compass,
  Map,
  Flag,
  Search,
  Filter,
  Globe,
  Building,
  Brain,
  Sparkles,
  Activity
} from "lucide-react"

interface ProductAnalysis {
  overallScore: number
  marketFit: {
    score: number
    analysis: string
    opportunities: string[]
    risks: string[]
  }
  competitivePosition: {
    score: number
    analysis: string
    advantages: string[]
    weaknesses: string[]
  }
  userExperience: {
    score: number
    analysis: string
    strengths: string[]
    improvements: string[]
  }
  businessModel: {
    score: number
    analysis: string
    revenue: string[]
    scalability: string
  }
  recommendations: {
    shortTerm: string[]
    longTerm: string[]
    priority: string[]
  }
  marketData: {
    marketSize: string
    growth: string
    segments: string[]
    trends: string[]
  }
}

export default function ProductAnalysisPage() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [loading, setLoading] = useState(false)
  const [analysis, setAnalysis] = useState<ProductAnalysis | null>(null)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  
  // 表单数据
  const [formData, setFormData] = useState({
    productName: "",
    category: "",
    stage: "",
    targetUsers: "",
    keyFeatures: "",
    valueProposition: "",
    competitors: "",
    pricing: "",
    channels: "",
    kpis: "",
    challenges: "",
    goals: ""
  })

  const steps = [
    { id: 1, title: "产品基础", desc: "产品基本信息" },
    { id: 2, title: "用户市场", desc: "目标用户和市场分析" },
    { id: 3, title: "产品特性", desc: "功能特色和价值主张" },
    { id: 4, title: "商业模式", desc: "盈利模式和运营策略" },
    { id: 5, title: "分析报告", desc: "生成产品分析报告" }
  ]

  const categories = [
    "SaaS软件", "移动应用", "电商平台", "社交媒体", "教育科技",
    "金融科技", "医疗健康", "企业服务", "消费电子", "游戏娱乐",
    "物联网", "人工智能", "区块链", "其他"
  ]

  const stages = [
    "概念阶段", "MVP开发", "产品测试", "市场验证", "增长期", "成熟期"
  ]

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const validateStep = (step: number): boolean => {
    switch (step) {
      case 1:
        return !!(formData.productName && formData.category && formData.stage)
      case 2:
        return !!(formData.targetUsers && formData.valueProposition)
      case 3:
        return !!(formData.keyFeatures && formData.competitors)
      case 4:
        return !!(formData.pricing && formData.channels)
      default:
        return true
    }
  }

  const nextStep = () => {
    if (validateStep(currentStep)) {
      setCurrentStep(prev => Math.min(5, prev + 1))
    }
  }

  const prevStep = () => {
    setCurrentStep(prev => Math.max(1, prev - 1))
  }

  const generateAnalysis = async () => {
    setLoading(true)
    
    try {
      // 模拟AI分析处理
      await new Promise(resolve => setTimeout(resolve, 3000))
      
      const mockAnalysis: ProductAnalysis = {
        overallScore: Math.floor(Math.random() * 20) + 80,
        marketFit: {
          score: Math.floor(Math.random() * 20) + 75,
          analysis: `${formData.productName}在${formData.category}领域具有良好的市场契合度。目标用户群体${formData.targetUsers}对该类产品有明确需求，市场潜力较大。`,
          opportunities: [
            "目标用户群体规模庞大且需求明确",
            "市场竞争相对分散，有机会建立差异化优势",
            "技术发展趋势支持产品创新方向",
            "用户付费意愿逐步提升"
          ],
          risks: [
            "市场竞争可能加剧",
            "用户需求变化较快",
            "技术门槛可能降低",
            "监管政策存在不确定性"
          ]
        },
        competitivePosition: {
          score: Math.floor(Math.random() * 15) + 80,
          analysis: `相比于${formData.competitors}，${formData.productName}在${formData.keyFeatures}方面具有明显优势，但在市场占有率和品牌知名度方面还需要加强。`,
          advantages: [
            `独特的${formData.keyFeatures}功能设计`,
            `针对${formData.targetUsers}的精准定位`,
            `灵活的${formData.pricing}策略`,
            "快速的产品迭代能力"
          ],
          weaknesses: [
            "品牌知名度相对较低",
            "市场推广资源有限",
            "用户基数较小",
            "资金实力相对不足"
          ]
        },
        userExperience: {
          score: Math.floor(Math.random() * 20) + 75,
          analysis: `产品在用户体验方面表现良好，${formData.keyFeatures}能够有效解决用户痛点，但在界面设计和用户引导方面还有优化空间。`,
          strengths: [
            "核心功能设计贴近用户需求",
            "产品操作流程相对简洁",
            "响应速度较快",
            "客户服务态度良好"
          ],
          improvements: [
            "优化界面设计和交互体验",
            "完善新用户引导流程",
            "增加个性化设置选项",
            "提升移动端体验"
          ]
        },
        businessModel: {
          score: Math.floor(Math.random() * 15) + 82,
          analysis: `采用${formData.pricing}的商业模式具有良好的可持续性，通过${formData.channels}进行市场推广，具备一定的盈利潜力。`,
          revenue: [
            "订阅费收入",
            "增值服务收入",
            "广告收入",
            "数据服务收入"
          ],
          scalability: "产品具备良好的规模化扩展能力，边际成本递减明显，适合快速增长策略。"
        },
        recommendations: {
          shortTerm: [
            "完善核心功能，提升用户留存率",
            "加强市场推广，扩大用户基数",
            "优化定价策略，提高转化率",
            "建立用户反馈机制，快速迭代产品"
          ],
          longTerm: [
            "建立技术护城河，形成竞争壁垒",
            "拓展产品线，满足用户多样化需求",
            "考虑国际化扩张机会",
            "探索新的商业模式和收入来源"
          ],
          priority: [
            "用户体验优化 - 直接影响用户满意度和留存",
            "市场推广策略 - 快速扩大用户基数",
            "产品差异化 - 建立竞争优势",
            "商业模式完善 - 确保可持续发展"
          ]
        },
        marketData: {
          marketSize: `${formData.category}市场规模预计达到100-500亿元`,
          growth: "年复合增长率预计在15-25%之间",
          segments: [
            "个人用户市场",
            "中小企业市场",
            "大企业客户市场",
            "垂直行业市场"
          ],
          trends: [
            "数字化转型需求持续增长",
            "用户对产品体验要求不断提升",
            "AI技术在产品中的应用越来越广泛",
            "订阅制商业模式逐渐成为主流"
          ]
        }
      }
      
      setAnalysis(mockAnalysis)
      setCurrentStep(5)
    } catch (error) {
      console.error("生成分析失败:", error)
    } finally {
      setLoading(false)
    }
  }

  const exportReport = () => {
    console.log("导出产品分析报告")
  }

  const shareReport = () => {
    console.log("分享产品分析报告")
  }

  // 检查用户登录状态
  useEffect(() => {
    const user = localStorage.getItem('currentUser')
    if (!user) {
      alert('请先登录后使用此功能')
      router.push('/login')
      return
    }
    setCurrentUser(JSON.parse(user))
    setIsLoading(false)
  }, [router])

  const getScoreColor = (score: number) => {
    if (score >= 90) return "text-green-600"
    if (score >= 80) return "text-blue-600"
    if (score >= 70) return "text-yellow-600"
    return "text-red-600"
  }

  const getScoreBackground = (score: number) => {
    if (score >= 90) return "bg-green-100"
    if (score >= 80) return "bg-blue-100"
    if (score >= 70) return "bg-yellow-100"
    return "bg-red-100"
  }

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30 flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-4 border-slate-300 border-t-slate-600 rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-slate-600">验证登录状态...</p>
        </div>
      </div>
    )
  }

  if (!currentUser) {
    return null
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      {/* 头部导航 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50">
        <div className="max-w-4xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => router.push("/")}
                className="flex items-center space-x-2"
              >
                <ArrowLeft className="w-4 h-4" />
                <span>返回首页</span>
              </Button>
              <div className="h-6 w-px bg-slate-200" />
              <div className="flex items-center space-x-2">
                <Award className="w-6 h-6 text-pink-600" />
                <h1 className="text-xl font-bold text-slate-900">产品分析工具</h1>
              </div>
            </div>
            
            <div className="flex items-center space-x-2">
              <span className="text-sm text-slate-600">
                步骤 {currentStep}/5
              </span>
              <Progress value={(currentStep / 5) * 100} className="w-20" />
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-4xl mx-auto px-6 py-8">
        {/* 步骤指示器 */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            {steps.map((step) => (
              <div
                key={step.id}
                className={`flex flex-col items-center space-y-2 ${
                  step.id <= currentStep ? "text-pink-600" : "text-slate-400"
                }`}
              >
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium ${
                    step.id < currentStep
                      ? "bg-pink-600 text-white"
                      : step.id === currentStep
                      ? "bg-pink-100 text-pink-600 border-2 border-pink-600"
                      : "bg-slate-100 text-slate-400"
                  }`}
                >
                  {step.id < currentStep ? (
                    <CheckCircle className="w-5 h-5" />
                  ) : (
                    step.id
                  )}
                </div>
                <div className="text-center">
                  <div className="text-sm font-medium">{step.title}</div>
                  <div className="text-xs text-slate-500">{step.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 表单内容 */}
        <Card className="bg-white/70 backdrop-blur-sm border-0 shadow-lg">
          <CardContent className="p-8">
            {currentStep === 1 && (
              <div className="space-y-6">
                <div className="text-center mb-8">
                  <Rocket className="w-12 h-12 text-pink-600 mx-auto mb-4" />
                  <h2 className="text-2xl font-bold text-slate-900 mb-2">产品基础信息</h2>
                  <p className="text-slate-600">请填写您产品的基本信息</p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      产品名称 *
                    </label>
                    <Input
                      placeholder="请输入产品名称"
                      value={formData.productName}
                      onChange={(e) => handleInputChange("productName", e.target.value)}
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      产品类别 *
                    </label>
                    <select
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg bg-white"
                      value={formData.category}
                      onChange={(e) => handleInputChange("category", e.target.value)}
                    >
                      <option value="">请选择产品类别</option>
                      {categories.map(category => (
                        <option key={category} value={category}>{category}</option>
                      ))}
                    </select>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      发展阶段 *
                    </label>
                    <select
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg bg-white"
                      value={formData.stage}
                      onChange={(e) => handleInputChange("stage", e.target.value)}
                    >
                      <option value="">请选择发展阶段</option>
                      {stages.map(stage => (
                        <option key={stage} value={stage}>{stage}</option>
                      ))}
                    </select>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      关键指标
                    </label>
                    <Input
                      placeholder="如：日活用户数、转化率等"
                      value={formData.kpis}
                      onChange={(e) => handleInputChange("kpis", e.target.value)}
                    />
                  </div>
                </div>
              </div>
            )}

            {currentStep === 2 && (
              <div className="space-y-6">
                <div className="text-center mb-8">
                  <Users className="w-12 h-12 text-pink-600 mx-auto mb-4" />
                  <h2 className="text-2xl font-bold text-slate-900 mb-2">用户与市场</h2>
                  <p className="text-slate-600">定义目标用户和价值主张</p>
                </div>

                <div className="space-y-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      目标用户群体 *
                    </label>
                    <Textarea
                      placeholder="详细描述您的目标用户，包括年龄、职业、需求特点等..."
                      value={formData.targetUsers}
                      onChange={(e) => handleInputChange("targetUsers", e.target.value)}
                      rows={4}
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      价值主张 *
                    </label>
                    <Textarea
                      placeholder="描述您的产品为用户创造的核心价值..."
                      value={formData.valueProposition}
                      onChange={(e) => handleInputChange("valueProposition", e.target.value)}
                      rows={3}
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      主要挑战
                    </label>
                    <Textarea
                      placeholder="描述产品面临的主要挑战和问题..."
                      value={formData.challenges}
                      onChange={(e) => handleInputChange("challenges", e.target.value)}
                      rows={3}
                    />
                  </div>
                </div>
              </div>
            )}

            {currentStep === 3 && (
              <div className="space-y-6">
                <div className="text-center mb-8">
                  <Lightbulb className="w-12 h-12 text-pink-600 mx-auto mb-4" />
                  <h2 className="text-2xl font-bold text-slate-900 mb-2">产品特性</h2>
                  <p className="text-slate-600">描述产品功能和竞争环境</p>
                </div>

                <div className="space-y-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      核心功能特色 *
                    </label>
                    <Textarea
                      placeholder="列出产品的核心功能和独特特色..."
                      value={formData.keyFeatures}
                      onChange={(e) => handleInputChange("keyFeatures", e.target.value)}
                      rows={4}
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      主要竞争对手 *
                    </label>
                    <Textarea
                      placeholder="列出主要竞争对手及其特点..."
                      value={formData.competitors}
                      onChange={(e) => handleInputChange("competitors", e.target.value)}
                      rows={4}
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      产品目标
                    </label>
                    <Textarea
                      placeholder="描述产品的短期和长期目标..."
                      value={formData.goals}
                      onChange={(e) => handleInputChange("goals", e.target.value)}
                      rows={3}
                    />
                  </div>
                </div>
              </div>
            )}

            {currentStep === 4 && (
              <div className="space-y-6">
                <div className="text-center mb-8">
                  <BarChart3 className="w-12 h-12 text-pink-600 mx-auto mb-4" />
                  <h2 className="text-2xl font-bold text-slate-900 mb-2">商业模式</h2>
                  <p className="text-slate-600">定价策略和运营模式</p>
                </div>

                <div className="space-y-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      定价策略 *
                    </label>
                    <Textarea
                      placeholder="描述您的定价模式，如免费增值、订阅制、一次性付费等..."
                      value={formData.pricing}
                      onChange={(e) => handleInputChange("pricing", e.target.value)}
                      rows={3}
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      推广渠道 *
                    </label>
                    <Textarea
                      placeholder="描述主要的获客渠道和推广策略..."
                      value={formData.channels}
                      onChange={(e) => handleInputChange("channels", e.target.value)}
                      rows={3}
                    />
                  </div>
                </div>

                <Alert>
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>
                    我们将基于您提供的信息，运用AI算法分析您的产品竞争力，生成专业的产品分析报告。
                  </AlertDescription>
                </Alert>
              </div>
            )}

            {currentStep === 5 && analysis && (
              <div className="space-y-8">
                <div className="text-center mb-8">
                  <div className="w-16 h-16 bg-gradient-to-br from-pink-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Award className="w-8 h-8 text-white" />
                  </div>
                  <h2 className="text-2xl font-bold text-slate-900 mb-2">产品分析报告</h2>
                  <p className="text-slate-600">基于AI算法生成的专业产品竞争力分析</p>
                  
                  <div className="flex items-center justify-center space-x-4 mt-4">
                    <div className="flex items-center space-x-2">
                      <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                      <span className="text-sm text-slate-600">综合评分: {analysis.overallScore}分</span>
                    </div>
                    <Badge className="bg-green-100 text-green-700">
                      {analysis.overallScore >= 90 ? "优秀" : analysis.overallScore >= 80 ? "良好" : "需优化"}
                    </Badge>
                  </div>
                </div>

                {/* 评分概览 */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                  <Card className="text-center">
                    <CardContent className="p-4">
                      <div className={`text-2xl font-bold ${getScoreColor(analysis.marketFit.score)}`}>
                        {analysis.marketFit.score}
                      </div>
                      <div className="text-sm text-slate-600 mt-1">市场契合度</div>
                    </CardContent>
                  </Card>
                  <Card className="text-center">
                    <CardContent className="p-4">
                      <div className={`text-2xl font-bold ${getScoreColor(analysis.competitivePosition.score)}`}>
                        {analysis.competitivePosition.score}
                      </div>
                      <div className="text-sm text-slate-600 mt-1">竞争地位</div>
                    </CardContent>
                  </Card>
                  <Card className="text-center">
                    <CardContent className="p-4">
                      <div className={`text-2xl font-bold ${getScoreColor(analysis.userExperience.score)}`}>
                        {analysis.userExperience.score}
                      </div>
                      <div className="text-sm text-slate-600 mt-1">用户体验</div>
                    </CardContent>
                  </Card>
                  <Card className="text-center">
                    <CardContent className="p-4">
                      <div className={`text-2xl font-bold ${getScoreColor(analysis.businessModel.score)}`}>
                        {analysis.businessModel.score}
                      </div>
                      <div className="text-sm text-slate-600 mt-1">商业模式</div>
                    </CardContent>
                  </Card>
                </div>

                <Tabs defaultValue="market" className="w-full">
                  <TabsList className="grid w-full grid-cols-5">
                    <TabsTrigger value="market">市场分析</TabsTrigger>
                    <TabsTrigger value="competitive">竞争分析</TabsTrigger>
                    <TabsTrigger value="experience">用户体验</TabsTrigger>
                    <TabsTrigger value="business">商业模式</TabsTrigger>
                    <TabsTrigger value="recommendations">建议</TabsTrigger>
                  </TabsList>
                  
                  <TabsContent value="market" className="space-y-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center space-x-2">
                          <Target className="w-5 h-5" />
                          <span>市场契合度分析</span>
                          <Badge className={getScoreBackground(analysis.marketFit.score)}>
                            {analysis.marketFit.score}分
                          </Badge>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-slate-700 leading-relaxed mb-4">{analysis.marketFit.analysis}</p>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                            <h4 className="font-medium text-green-700 mb-3 flex items-center space-x-2">
                              <ThumbsUp className="w-4 h-4" />
                              <span>市场机会</span>
                            </h4>
                            <div className="space-y-2">
                              {analysis.marketFit.opportunities.map((item, index) => (
                                <div key={index} className="flex items-start space-x-2">
                                  <div className="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
                                  <p className="text-sm text-slate-700">{item}</p>
                                </div>
                              ))}
                            </div>
                          </div>
                          
                          <div>
                            <h4 className="font-medium text-red-700 mb-3 flex items-center space-x-2">
                              <ThumbsDown className="w-4 h-4" />
                              <span>潜在风险</span>
                            </h4>
                            <div className="space-y-2">
                              {analysis.marketFit.risks.map((item, index) => (
                                <div key={index} className="flex items-start space-x-2">
                                  <div className="w-1.5 h-1.5 bg-red-500 rounded-full mt-2 flex-shrink-0"></div>
                                  <p className="text-sm text-slate-700">{item}</p>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center space-x-2">
                          <Globe className="w-5 h-5" />
                          <span>市场数据</span>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                            <h4 className="font-medium text-slate-900 mb-3">市场规模与增长</h4>
                            <div className="space-y-2">
                              <div className="flex items-center justify-between p-2 bg-slate-50 rounded">
                                <span className="text-sm text-slate-600">市场规模</span>
                                <span className="text-sm font-medium">{analysis.marketData.marketSize}</span>
                              </div>
                              <div className="flex items-center justify-between p-2 bg-slate-50 rounded">
                                <span className="text-sm text-slate-600">增长率</span>
                                <span className="text-sm font-medium text-green-600">{analysis.marketData.growth}</span>
                              </div>
                            </div>
                          </div>
                          
                          <div>
                            <h4 className="font-medium text-slate-900 mb-3">市场趋势</h4>
                            <div className="space-y-2">
                              {analysis.marketData.trends.map((trend, index) => (
                                <div key={index} className="flex items-start space-x-2">
                                  <TrendingUp className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
                                  <p className="text-sm text-slate-700">{trend}</p>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>
                  
                  <TabsContent value="competitive" className="space-y-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center space-x-2">
                          <Shield className="w-5 h-5" />
                          <span>竞争地位分析</span>
                          <Badge className={getScoreBackground(analysis.competitivePosition.score)}>
                            {analysis.competitivePosition.score}分
                          </Badge>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-slate-700 leading-relaxed mb-4">{analysis.competitivePosition.analysis}</p>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                            <h4 className="font-medium text-green-700 mb-3 flex items-center space-x-2">
                              <Star className="w-4 h-4" />
                              <span>竞争优势</span>
                            </h4>
                            <div className="space-y-2">
                              {analysis.competitivePosition.advantages.map((item, index) => (
                                <div key={index} className="flex items-start space-x-2">
                                  <div className="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
                                  <p className="text-sm text-slate-700">{item}</p>
                                </div>
                              ))}
                            </div>
                          </div>
                          
                          <div>
                            <h4 className="font-medium text-orange-700 mb-3 flex items-center space-x-2">
                              <AlertCircle className="w-4 h-4" />
                              <span>需要改进</span>
                            </h4>
                            <div className="space-y-2">
                              {analysis.competitivePosition.weaknesses.map((item, index) => (
                                <div key={index} className="flex items-start space-x-2">
                                  <div className="w-1.5 h-1.5 bg-orange-500 rounded-full mt-2 flex-shrink-0"></div>
                                  <p className="text-sm text-slate-700">{item}</p>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>
                  
                  <TabsContent value="experience" className="space-y-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center space-x-2">
                          <Heart className="w-5 h-5" />
                          <span>用户体验分析</span>
                          <Badge className={getScoreBackground(analysis.userExperience.score)}>
                            {analysis.userExperience.score}分
                          </Badge>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-slate-700 leading-relaxed mb-4">{analysis.userExperience.analysis}</p>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                            <h4 className="font-medium text-green-700 mb-3 flex items-center space-x-2">
                              <CheckCircle className="w-4 h-4" />
                              <span>体验优势</span>
                            </h4>
                            <div className="space-y-2">
                              {analysis.userExperience.strengths.map((item, index) => (
                                <div key={index} className="flex items-start space-x-2">
                                  <div className="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
                                  <p className="text-sm text-slate-700">{item}</p>
                                </div>
                              ))}
                            </div>
                          </div>
                          
                          <div>
                            <h4 className="font-medium text-blue-700 mb-3 flex items-center space-x-2">
                              <Zap className="w-4 h-4" />
                              <span>优化建议</span>
                            </h4>
                            <div className="space-y-2">
                              {analysis.userExperience.improvements.map((item, index) => (
                                <div key={index} className="flex items-start space-x-2">
                                  <div className="w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
                                  <p className="text-sm text-slate-700">{item}</p>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>
                  
                  <TabsContent value="business" className="space-y-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center space-x-2">
                          <Building className="w-5 h-5" />
                          <span>商业模式分析</span>
                          <Badge className={getScoreBackground(analysis.businessModel.score)}>
                            {analysis.businessModel.score}分
                          </Badge>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-slate-700 leading-relaxed mb-4">{analysis.businessModel.analysis}</p>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                            <h4 className="font-medium text-slate-900 mb-3">收入来源</h4>
                            <div className="space-y-2">
                              {analysis.businessModel.revenue.map((item, index) => (
                                <div key={index} className="flex items-center space-x-2 p-2 bg-slate-50 rounded">
                                  <Crown className="w-4 h-4 text-yellow-500" />
                                  <span className="text-sm text-slate-700">{item}</span>
                                </div>
                              ))}
                            </div>
                          </div>
                          
                          <div>
                            <h4 className="font-medium text-slate-900 mb-3">规模化能力</h4>
                            <div className="p-4 bg-blue-50 rounded-lg">
                              <p className="text-sm text-slate-700">{analysis.businessModel.scalability}</p>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>
                  
                  <TabsContent value="recommendations" className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <Card>
                        <CardHeader>
                          <CardTitle className="flex items-center space-x-2">
                            <Zap className="w-5 h-5" />
                            <span>短期建议</span>
                          </CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-3">
                            {analysis.recommendations.shortTerm.map((item, index) => (
                              <div key={index} className="flex items-start space-x-3 p-3 bg-yellow-50 rounded-lg">
                                <div className="w-6 h-6 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0">
                                  {index + 1}
                                </div>
                                <p className="text-sm text-slate-700">{item}</p>
                              </div>
                            ))}
                          </div>
                        </CardContent>
                      </Card>

                      <Card>
                        <CardHeader>
                          <CardTitle className="flex items-center space-x-2">
                            <Rocket className="w-5 h-5" />
                            <span>长期建议</span>
                          </CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-3">
                            {analysis.recommendations.longTerm.map((item, index) => (
                              <div key={index} className="flex items-start space-x-3 p-3 bg-blue-50 rounded-lg">
                                <div className="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0">
                                  {index + 1}
                                </div>
                                <p className="text-sm text-slate-700">{item}</p>
                              </div>
                            ))}
                          </div>
                        </CardContent>
                      </Card>
                    </div>

                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center space-x-2">
                          <Flag className="w-5 h-5" />
                          <span>优先级建议</span>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          {analysis.recommendations.priority.map((item, index) => (
                            <div key={index} className="flex items-start space-x-3 p-4 border-l-4 border-pink-500 bg-pink-50">
                              <div className="w-8 h-8 bg-pink-100 text-pink-600 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">
                                {index + 1}
                              </div>
                              <p className="text-slate-700">{item}</p>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>
                </Tabs>

                <div className="flex justify-center space-x-4 pt-6 border-t">
                  <Button onClick={exportReport} className="flex items-center space-x-2">
                    <Download className="w-4 h-4" />
                    <span>导出报告</span>
                  </Button>
                  <Button variant="outline" onClick={shareReport} className="flex items-center space-x-2">
                    <Share2 className="w-4 h-4" />
                    <span>分享报告</span>
                  </Button>
                </div>
              </div>
            )}

            {/* 操作按钮 */}
            {currentStep < 5 && (
              <div className="flex justify-between pt-8 border-t">
                <Button
                  variant="outline"
                  onClick={prevStep}
                  disabled={currentStep === 1}
                  className="flex items-center space-x-2"
                >
                  <span>上一步</span>
                </Button>
                
                {currentStep === 4 ? (
                  <Button
                    onClick={generateAnalysis}
                    disabled={!validateStep(currentStep) || loading}
                    className="flex items-center space-x-2 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-700 hover:to-purple-700"
                  >
                    {loading ? (
                      <>
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                        <span>AI分析中...</span>
                      </>
                    ) : (
                      <>
                        <Brain className="w-4 h-4" />
                        <span>生成产品分析</span>
                      </>
                    )}
                  </Button>
                ) : (
                  <Button
                    onClick={nextStep}
                    disabled={!validateStep(currentStep)}
                    className="flex items-center space-x-2"
                  >
                    <span>下一步</span>
                  </Button>
                )}
              </div>
            )}
          </CardContent>
        </Card>
      </main>
    </div>
  )
}